import { Tabs, Popup } from 'antd-mobile'
import { Icon } from '@/components/Icon'

import styles from './index.module.scss'
import { useInitialState } from '@/utils/use-initial-state'
import { getChannels, toggleChannel } from '@/store/actions/home'

import Channels from './Channels'
import { useState } from 'react'
import { useDispatch } from 'react-redux'

import ArticleList from './components/ArticleList'
import { useHistory } from 'react-router-dom'

const Home = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  const [channelVisible, setChannelVisible] = useState(false)
  const { channels, channelActiveKey } = useInitialState(getChannels, 'home')

  // 频道管理弹出层展示
  const onChannelShow = () => setChannelVisible(true)

  // 频道管理弹出层隐藏
  const onChannelHide = () => setChannelVisible(false)

  // 切换 tab
  const changeTab = (key: string) => {
    dispatch(toggleChannel(+key))
  }

  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      {/* 
        Tabs 内部只在组件第一次渲染时，会指定默认高亮的 Tab，
        而对我们的数据来说，频道数据是动态获取的。第一次渲染 Tabs 时，是没有数据的
        只有发送请求，更新 redux 状态后，组件重新渲染，此时，才获取到了最新的 频道数据

        思路：在拿到频道列表数据后，再渲染 Tabs 数据。这样，对于 Tabs 的第一次渲染来说
             就有数据了
             也就是：延迟渲染数据
      */}
      {channels.length > 0 && (
        <Tabs
          className="tabs"
          activeLineMode="fixed"
          activeKey={channelActiveKey + ''}
          onChange={changeTab}
        >
          {channels.map(item => (
            // forceRender 表示 Tab 在隐藏时也会渲染 DOM 结构
            // 如果希望频道没有选中时，也加载文章列表数据，就设置 forceRender 属性；否则，不设置
            // <Tabs.Tab forceRender title={item.name} key={item.id}>
            <Tabs.Tab forceRender title={item.name} key={item.id}>
              {/*
                每个频道都有自己的 文章列表 数据，所以，此处将当前频道的 id 传递给 ArticleList 组件
                这样，ArticleList 就可以拿到当前自己频道对应的文章列表数据了
              */}
              <ArticleList channelId={item.id} />
            </Tabs.Tab>
          ))}
        </Tabs>
      )}

      <div className="tabs-opration">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
        <Icon type="iconbtn_channel" onClick={onChannelShow} />
      </div>

      {/* 频道管理 - 弹出层 */}
      <Popup visible={channelVisible} className="channel-popup" position="left">
        <Channels onClose={onChannelHide} />
      </Popup>
    </div>
  )
}

export default Home
